<?php include("/includes/header.php") ?>
<?php include("/includes/sidebar.php") ?>

<div class="content row-fluid"> 
	<div class="span12 table-placer">
		<div class="alert alert-info"><h4>Agent Report</h4></div>
		<div class="row-fluid index-pos-placer content">
			<form id="formGraph" class="form-inline">
				<fieldset>
					<select id="graph_type">
						<option value="*">---Choose Date Format---</option>
						<option value="monthview" data-format="yyyy" data-min-view="years">Year View</option>
						<option value="weekview" data-format="yyyy-m" data-min-view="months">Month View</option>
					</select>
					<input type="text" class="input-medium" placeholder="yyyy-mm-dd" id="datepick" name="datepick" value="" readonly="">
					<button type="submit" class="btn btn-primary f2">Submit (F2)</button>
				</fieldset>
			</form>
			<p id="graphNotification" class="alert alert-error">
				No result, please fix your search query...
			</p>
			<table class="table table-bordered table-stripped" id="data_table">
				<thead>
					<tr>
						<th>No</th>
						<th>Name</th>
						<th>Guest Taken In</th>
						<th>Total Comission</th>
					</tr>
				</thead>
				<tbody id="agent-placer">
				</tbody>
			</table>
			<div id="placeholder">
				<figure id="graph"></figure>
			</div>
		</div>
	</div>
</div>

<div class="footer">
</div>

<?php include("/includes/footer.php") ?>

<script type="text/javascript">
	$(document).ready(function() {
		var act = $('#graph_type').val();

		$('#datepick').hide();
		$('#graphNotification').hide();

		$('#datepick').datepicker();

		$('#graph_type').change(function(event) {
			/* Act on the event */
			var that = $(this);
			var optionDate = that.find("option:selected");
			act = that.val();
			$('#datepick').hide();
			$('#datepick').datepicker("remove");
			$('#datepick').val("");
			if (that.val() != 'yearview') {
				$('#datepick').show();
				$('#datepick').datepicker({
					format: optionDate.data("format"),
					minViewMode: optionDate.data("min-view"),
					autoclose: true
				});
			}
		});

		$('#formGraph').submit(function(event) {
			/* Act on the event */
			event.preventDefault();
			$('#graphNotification').hide();
			$('body').modalmanager("loading");
			$.post("action/act_report_agent.php", {act: act, date: $('#datepick').val()}, function(data, textStatus) {
				setTimeout(function(){
					$('body').modalmanager("loading");
				}, 500);
				$("#agent-placer").html("");
				$.each(data, function(index, val) {
					var html = "<tr>";
					html += "<td>"+(index+1)+"</td>";
					html += "<td>"+val.name+"</td>";
					html += "<td>"+val.tamu+"</td>";
					html += "<td>"+val.paid+"</td>";
					html += "</tr>";
					$('#agent-placer').append(html);
				});
			}, "json");
		});
	});
</script>